<template>
	<view class="chapterexericises">
		<view class="model" v-show="model" @click="hidemodel"></view>
		<view class="question-list" @touchstart="start" @touchend="end">
			<view class="questions">
				<!-- 题目类型 -->
				<view class="question-type">
					<view class="type">考研政治10年真题</view>
					<view class="order-number"><span> {{page_index > count ? count : page_index < 0 ? 1 : page_index + 1}} </span>/
						{{count}}</view>
				</view>
				<!-- 题目内容 单选 0 -->
				<view class="content" v-show="QuestionList.questionType===0">
					<view class="">(单选题)</view>
					<view class="topic">{{QuestionList.fldName}}</view>
					<view class="question" v-for="(item,index) in QuestionList.QuestionOptionList" :key="index">
						<!-- :class="{green:index === fldAnswer}" -->
						<view class="options" @click="Answer(index)" :class="[QuestionList.seletedOption === -1 ? '' 
							: index === QuestionList.fldAnswer ? 'green' 
							: QuestionList.seletedOption !==  QuestionList.fldAnswer && QuestionList.seletedOption === index ? 'red':'']">
							<i>{{item.fldOption}}</i>
							<span>{{item.fldOptionText}}</span>
						</view>
					</view>
				</view>
				<!-- 题目内容 多选 1 -->
				<view class="content" v-show="QuestionList.questionType===1">
					<view class="">(多选题)</view>
					<view class="topic">{{QuestionList.fldName}}</view>
					<view class="question" v-for="(item,index) in QuestionList.QuestionOptionList" :key="index">
						<view class="options checkbox" @click="checkboxAnswer(index)" :class="[doQuestionClass(index)]">
							<i :style="{backgroundColor:isconfirm && confirm(index)}">{{item.fldOption}}</i>
							<span>{{item.fldOptionText}}</span>
						</view>
					</view>
					<view class="confirm" @click="confirms">确认选项</view>
				</view>
				<!-- 答案解析 -->
				<view class="analysis" v-show="analysis && QuestionList.questionType===0">
					<view class="correct-answer">正确答案：<text>{{QuestionList.QuestionOptionList[QuestionList.fldAnswer].fldOption}}</text></view>
					<view class="you-answer">您的答案：<text :class="[QuestionList.fldAnswer === record[page_index].seletedOption ? 'green' :'red'] ">{{QuestionList.QuestionOptionList[record[page_index].seletedOption].fldOption}}</text></view>
					<view class="break-down">
						解析:{{QuestionList.analysis}}
					</view>
				</view>
				<view class="analysis" v-show="analysis">
					<view class="correct-answer">正确答案：<text>{{QuestionList.QuestionOptionList[QuestionList.fldAnswer].fldOption}}</text></view>
					<view class="you-answer">您的答案：<text :class="[QuestionList.fldAnswer === record[page_index].seletedOption ? 'green' :'red'] ">{{QuestionList.QuestionOptionList[record[page_index].seletedOption].fldOption}}</text></view>
					<view class="break-down">
						解析:{{QuestionList.analysis}}
					</view>
				</view>
			</view>
		</view>
		<!-- 添加笔记 -->
		<view class="notes" v-show="notes">
			<view class="title">添加笔记</view>
			<textarea value="" placeholder="请输入您的笔记..." focus="true" maxlength="-1" :show-confirm-bar="false" @blur="bindTextAreaBlur" />
			<button type="primary" form-type="submit">添加</button>
		</view>
		<!-- 答题卡 -->
		<view class="sheet" v-show="sheet">
			<view class="title">答题卡</view>
			<view class="sheet-content">
				<!-- :class="[!record[page_index].seletedOption ? '' : QuestionList.fldAnswer === record[page_index].seletedOption ? 'green' : 'red']" -->
				<text v-for="(item,index) in count" :key="index" @click.navite.stop="handleToCurQuestion(index)">{{index+1}}</text>
			</view>
			<view class="button">
				<button type="primary" form-type="reset">重做</button>
				<button type="primary" form-type="submit">提交</button>
			</view>
		</view>
		<!-- 底部悬浮菜单 -->
		<view class="uni-fab-box">
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction"
			 @trigger="trigger" />
		</view>
	</view>
</template>

<script>
	import uniFab from "@/components/uni-fab/uni-fab.vue";
	import uniList from "@/components/uni-list/uni-list.vue";
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue";
	import question_data from "./single.js";
	export default {
		components: {
			uniFab,
			uniList,
			uniListItem
		},
		data() {
			return {
				startDataClientX:0,
				title: '章节练习',
				analysis: false,   //答案解析
				model:false,    //遮罩
				sheet:false,   //答题卡
				notes:false,   //笔记
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				fldAnswer: null,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#66CC99',
					buttonColor: '#66CC99'
				},
				content: [{
						iconPath: '/static/icon/collect.png',
						selectedIconPath: '/static/icon/collectSelected.png',
						text: '收藏',
						active: false
					},
					{
						iconPath: '/static/icon/note.png',
						selectedIconPath: '/static/icon/noteSelected.png',
						text: '笔记',
						active: false
					},
					{
						iconPath: '/static/icon/answerCard.png',
						selectedIconPath: '/static/icon/answerCardSelected.png',
						text: '答题卡',
						active: false
					},
					{
						iconPath: '/static/icon/hideanswer.png',
						selectedIconPath: '/static/icon/showanswer.png',
						text: '答案',
						active: false
					}
				],
				question_data:question_data,
				QuestionList:'',
				page_index:0,
				count:0,
				isconfirm:false, 
				record:[]  //做题记录
			}
		},
		onLoad() {
			this.QuestionList = this.question_data[0];
			this.count = this.question_data.length;
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		
		methods: {
			trigger(e) {
				// console.log(e)
				this.content[e.index].active = !e.item.active;
				if(e.index === 0){
					console.log(this.content[0].active)
					if(this.content[0].active === true){
						uni.showToast({
							title:"已收藏",
							duration:1000
						})
					}else{
						uni.showToast({
							title:"取消收藏",
							duration:1000
						})
					}
				}
				if(e.index === 1){
					this.notes = !this.notes;
					this.model = true;
				}
				if (e.index === 2) {
					this.sheet = !this.sheet;
					this.model = true;
				}
				if (e.index === 3) {
					this.analysis = !this.analysis;
				}
			},
			switchBtn(hor, ver) {
				if (hor === 0) {
					this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
					this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
				} else {
					this.horizontal = hor
					this.vertical = ver
				}
				this.$forceUpdate()
			},
			// 影藏蒙层
			hidemodel(){
				this.model = false;
				this.sheet = false;
				this.notes = false;
				this.content[1].active = false;
				this.content[2].active = false;
			},
			//上一题
			prevQuestion(){
				this.page_index--;
				this.QuestionList = this.question_data[this.page_index];
			},
			//下一题
			nextQuestion(){
				this.page_index++;
				this.QuestionList = this.question_data[this.page_index];
				this.analysis = false;
				this.content[3].active = false;
			},
			//滑动开始
			start(e){
				// console.log(e)
				this.startDataClientX = e.changedTouches[0].clientX;
			},
			//滑动结束
			end(e){
				// console.log(e)
				var _this = this;
				const subX = e.changedTouches[0].clientX-this.startDataClientX;   //滑动的距离
				if(subX > 10 && this.page_index > 0){  //右滑 上一题
					this.prevQuestion();
				}else if(subX < -10 && this.page_index < this.count - 1){  //左滑 下一题
					this.nextQuestion();
				}
				else if(this.page_index >= this.count - 1){
					uni.showModal({
						title:'提交答案',
						content:'共' + this.count +'道题，还有220道题未作答',
						cancelText:'答题卡',
						confirmText:'提交',
						success(res){
							if(res.confirm){
								console.log('提交')
							}else if (res.cancel){
								// console.log('答题卡')
								_this.model = true;
								_this.sheet = true;
							}
						}
					})
				}
			},
			//获取笔记输入框里面的值
			bindTextAreaBlur(e){
				console.log(e.detail.value);
			},
			//答题 单选
			Answer(index){
				this.QuestionList.seletedOption = index
				this.record.push(this.QuestionList)
				// console.log(this.record)
			},
			//答题 多选
			checkboxAnswer(index){
				let idx = this.QuestionList.seletedOption.indexOf(index);
				//如果已经选中了，就取消选中，从你选择的答案的数组里面删除掉当前的index ， 如果没有选中，就push到你答案的数组中
				if(idx > -1){
					this.QuestionList.seletedOption.splice(idx,1);
				}else{
					this.QuestionList.seletedOption.push(index);
				}
			},
			//多选 做题时 添加类名
			doQuestionClass(index){
				return JSON.stringify(this.QuestionList.seletedOption) === '[]' || 
					this.QuestionList && Array.isArray(this.QuestionList.seletedOption) &&
					this.QuestionList.seletedOption.indexOf(index) === -1 ? '' : 'borderGreen'
			},
			confirms(){
				this.isconfirm = true
			},
			//多选 确认选项
			confirm(index){
				// 是否是选中的选项
				const isSeleted = this.QuestionList.seletedOption && Array.isArray(this.QuestionList.seletedOption) && this.QuestionList.seletedOption.includes(index)
				//是否选择正确
				const isCorrect = this.QuestionList.fldAnswer && Array.isArray(this.QuestionList.fldAnswer) && this.QuestionList.fldAnswer.includes(index)
				if(isSeleted && isCorrect){
					return '#4CD964';
				}else if(isSeleted && !isCorrect){
					return '#DD524D';
				}else if(!isSeleted && isCorrect){
					return '#8F8F94';
				}else{
					return '';
				}
			},
			//答题卡，跳转到当前选中题目页面
			handleToCurQuestion(index){
				this.QuestionList = this.question_data[index];
				this.page_index = index;
				this.sheet = false;
				this.model = false;
				this.content[2].active = false;
			}
		}
	}
</script>

<style>
	@import url("chapterexercises.css");
</style>
